<template>
  <view>
    <u-navbar :is-back="false" title="客户主页"
      title-size="30"
      :background="{background:'#2B88FE' }"
      title-color="#fff">
      <div class="head_icon">
        <u-icon @click="$api.handleBackTo"
          name="arrow-left" color="#fff"
          size="36">
        </u-icon>
        <u-icon @click="$api.handleHomeTo"
          name="home" color="#fff" size="36">
        </u-icon>
      </div>
    </u-navbar>

    <CommDetail :cid="id" :info="info"
      :current="1">

      <view class="info  x-row">
        <view class="x-col">
          <view class="itxt u-skeleton-rect">
            <view class="s1">
              联系人：</view>
            {{info.fContact}}
            （ {{info.fTellInfo}}）
          </view>
          <view class="itxt u-skeleton-rect">
            <view class="s1">
              超市类型：</view>
            {{info.fClassName}}
          </view>
          <view class="itxt u-skeleton-rect">
            <view class="s1">
              超市区域：</view>
            {{info.fClassAreaName}}

          </view>
          <view class="itxt u-skeleton-rect">
            <view class="s1">
              老客户：</view>
            {{info.fIsOld}}
          </view>
          <view class="itxt u-skeleton-rect">
            <view class="s1">
              是否成交：</view>
            {{info.fIsSign}}
          </view>

        </view>
      </view>

      <view class="titline u-skeleton-rect">
        促销情况
      </view>
      <view class="info u-skeleton-rect">
        <view class="cons txt whiteBg">
          {{info.fSalesInfo}}
        </view>
      </view>
      <view class="titline u-skeleton-rect">
        历史销售数据
      </view>
      <view class="info u-skeleton-rect">
        <view class="cons txt whiteBg">
          {{info.fAnalysis}}
        </view>
      </view>
      <view class="titline u-skeleton-rect">
        备注
      </view>
      <view class="info u-skeleton-rect">
        <view class="cons txt whiteBg">
          {{info.fRemarks}}
        </view>
      </view>
    </CommDetail>
    <u-modal v-model="showPay" title="账单"
      width="100%" confirm-text="关闭">
      <u-table>
        <u-tr>
          <u-th>账单金额
          </u-th>
          <u-th>未付金额</u-th>
          <u-th>类型</u-th>
          <u-th>状态</u-th>
          <u-th>操作</u-th>
        </u-tr>
        <u-tr v-for="(item,index) in formdata"
          :key="index">
          <u-td>
            {{item.fMoney}}
          </u-td>

          <u-td>
            {{item.fNoPayMoney}}
          </u-td>
          <u-td>
            {{item.fWillType}}
          </u-td>
          <u-td>
            {{item.fStatus}}
          </u-td>
          <u-td>
            <navigator
              :url="`/pages/my_customer/PayWillDetail?id=${item.fMrkId}&willid=${item.fId}`">
              <div class="yi">查看
              </div>
            </navigator>
          </u-td>
        </u-tr>
      </u-table>
      <u-empty text="暂无数据" mode="list"
        v-if="!formdata.length">
      </u-empty>
    </u-modal>
  </view>
</template>

<script>
import CommDetail from './commdetail'
export default {
  components: { CommDetail },
  data() {
    return {
      formdata: [],
      showPay: false,
      id: 0,
      info: {}
    }
  },
  methods: {
    OnClinkB() {
      uni.navigateTo({
        url: `/pages/my_customer/PayWill?id=${this.id}`
      })
    },

    OnClinkT() {
      uni.navigateTo({
        url: `/pages/my_customer/SaleList?id=${this.id}`
      })
    }
  },
  onLoad(e) {
    this.id = Number(e.id)
    this.$axios('api/MrkBasic/GetDetail', 'post', {
      value: e.id
    }).then(res => {
      this.info = res.Value
      this.loading = false
    })
    this.$axios('api/MrkNoPayWill/ListPaged', 'post', { value: e.id }).then(res => {
      this.formdata = res.Value.List
    })
  }
}
</script>

<style lang="scss" scoped>
.info {
  padding: 0 32rpx;
  box-sizing: border-box;

  .cons {
    border-radius: 16rpx;
    padding-top: 30rpx;
    .clist {
      padding: 0 0 30rpx 0;

      .imgicon {
        width: 40rpx;
        height: 40rpx;
        margin: 0 36rpx 0 28rpx;
      }
      .gimg {
        width: 96rpx;
        height: 96rpx;
        margin: 0 16rpx 0 30rpx;
      }

      .addrow {
        padding: 0 32rpx 30rpx 0;
        .adds {
          font-size: 32rpx;
          font-weight: 400;
          color: #333333;
          line-height: 44rpx;
        }

        .iconyou {
          color: #999999;
          font-size: 30rpx;
        }

        .phone {
          font-size: 32rpx;
          font-weight: 400;
          color: #333333;
          line-height: 44rpx;
        }

        .status {
          font-size: 30rpx;
          font-weight: 400;
          color: #2b88fe;
          line-height: 42rpx;
        }
        .gname {
          font-size: 32rpx;
          font-weight: 400;
          color: #000000;
          line-height: 30px;
          margin-bottom: 20rpx;
        }
        .gtime {
          font-size: 24rpx;
          font-weight: 400;
          color: #666666;
          line-height: 24rpx;
        }
      }
    }
  }

  .txt {
    padding: 32rpx;
    box-sizing: border-box;
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
  }
}

.topBox {
  padding: 36rpx 24rpx;
  box-sizing: border-box;

  .store {
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
  }

  .cname {
    font-size: 30rpx;
    font-weight: 400;
    color: #999999;
    line-height: 42px;
  }

  .cimg {
    width: 128rpx;
    height: 128rpx;
    margin-left: 20rpx;
    border-radius: 10rpx;
  }
}

.titline {
  padding: 32rpx 32rpx 16rpx 32rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
  line-height: 42rpx;
}

.info {
  padding: 10rpx 10rpx 10rpx 32rpx;
  box-sizing: border-box;

  .itxt {
    padding-bottom: 16rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #34404a;
    line-height: 40rpx;

    .s1 {
      width: 160rpx;
      color: #979797;
      font-size: 32rpx;
      display: inline-block;
    }

    .yhj {
      width: 96rpx;
      height: 40rpx;
      text-align: center;
      border-radius: 20rpx;
      display: inline-block;
      line-height: 40rpx;
      border: 2rpx solid #2b88fe;
      font-size: 28rpx;
      color: #2b88fe;
      margin-left: 16rpx;
    }

    .mingxi {
      font-weight: 400;
      color: #2b88fe;
      line-height: 42rpx;

      .iconfont {
        font-size: 25rpx;
      }

      display: inline-block;
      margin-left: 16rpx;
    }
  }
}
</style>